<template>
	<div class="changeclasstable">
		<div class="navget">
			<router-link to="/coursemanager/coursemanagement/courses" class="nava">课程</router-link>
			<router-link to="/coursemanager/coursemanagement/courseclass" style="color: black;"
				class="nava">班级</router-link>
		</div>
		<el-button type="danger" class="lookclasstable" @click="check" :disabled="checkFlag">检查</el-button>
		<span class="tip">请先检查再提交</span>
		<el-button type="success" class="addclasstable" @click="submit" :disabled="submitFlag">提交</el-button>
		<span @click="back" class="back">返回</span>
		<div class="tableFrom">
			<el-select placeholder="请选择班级" v-model="choose" class="coursechoose" @change="getclassid(choose)">
				<el-option v-for="item in classlist" :key="item.value" :label="item.clazzName"
					:value="item.clazzId"></el-option>
			</el-select>
			<span style="padding: 0 0 15px;margin-left: 5px;">课程表</span>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column prop="level" label="" width="180">
				</el-table-column>
				<el-table-column label="周一">
					<template slot-scope="scope">
						<el-select v-model="scope.row.list[0].subId" placeholder="科目"
							@change="getcourseid(scope.row.list[0])">
							<el-option v-for="item in courseslist" :key="item.subId" :label="item.subName"
								:value="item.subId">
							</el-option>
						</el-select>

						<el-select
							:class='{ active: scope.row.list[0].myErrorData.findIndex(v => v == "周1" + scope.row.list[0].timeName) != -1 ? true : false }'
							v-model="scope.row.list[0].teaId" placeholder="任课老师">
							<el-option v-for="item in scope.row.list[0].teacherlist" :key="item.teaId" :label="item.teaName"
								:value="item.teaId">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="周二">
					<template slot-scope="scope">
						<el-select v-model="scope.row.list[1].subId" placeholder="科目"
							@change="getcourseid(scope.row.list[1])">
							<el-option v-for="item in courseslist" :key="item.subId" :label="item.subName"
								:value="item.subId">
							</el-option>
						</el-select>
						<el-select
							:class='{ active: scope.row.list[1].myErrorData.findIndex(v => v == "周2" + scope.row.list[1].timeName) != -1 ? true : false }'
							v-model="scope.row.list[1].teaId" placeholder="任课老师">
							<el-option v-for="item in scope.row.list[1].teacherlist" :key="item.teaId" :label="item.teaName"
								:value="item.teaId">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="周三">
					<template slot-scope="scope">
						<el-select v-model="scope.row.list[2].subId" placeholder="科目"
							@change="getcourseid(scope.row.list[2])">
							<el-option v-for="item in courseslist" :key="item.subId" :label="item.subName"
								:value="item.subId">
							</el-option>
						</el-select>
						<el-select
							:class='{ active: scope.row.list[2].myErrorData.findIndex(v => v == "周3" + scope.row.list[2].timeName) != -1 ? true : false }'
							v-model="scope.row.list[2].teaId" placeholder="任课老师">
							<el-option v-for="item in scope.row.list[2].teacherlist" :key="item.teaId" :label="item.teaName"
								:value="item.teaId">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="周四">
					<template slot-scope="scope">

						<el-select v-model="scope.row.list[3].subId" placeholder="科目"
							@change="getcourseid(scope.row.list[3])">
							<el-option v-for="item in courseslist" :key="item.subId" :label="item.subName"
								:value="item.subId">
							</el-option>
						</el-select>
						<el-select
							:class='{ active: scope.row.list[3].myErrorData.findIndex(v => v == "周4" + scope.row.list[3].timeName) != -1 ? true : false }'
							v-model="scope.row.list[3].teaId" placeholder="任课老师">
							<el-option v-for="item in scope.row.list[3].teacherlist" :key="item.teaId" :label="item.teaName"
								:value="item.teaId">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="周五">
					<template slot-scope="scope">
						<el-select v-model="scope.row.list[4].subId" placeholder="科目"
							@change="getcourseid(scope.row.list[4])">
							<el-option v-for="item in courseslist" :key="item.subId" :label="item.subName"
								:value="item.subId">
							</el-option>
						</el-select>
						<el-select
							:class='{ active: scope.row.list[4].myErrorData.findIndex(v => v == "周5" + scope.row.list[4].timeName) != -1 ? true : false }'
							v-model="scope.row.list[4].teaId" placeholder="任课老师">
							<el-option v-for="item in scope.row.list[4].teacherlist" :key="item.teaId" :label="item.teaName"
								:value="item.teaId">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="周六">
					<template slot-scope="scope">
						<el-select v-model="scope.row.list[5].subId" placeholder="科目"
							@change="getcourseid(scope.row.list[5])">
							<el-option v-for="item in courseslist" :key="item.subId" :label="item.subName"
								:value="item.subId">
							</el-option>
						</el-select>
						<el-select
							:class='{ active: scope.row.list[5].myErrorData.findIndex(v => v == "周6" + scope.row.list[5].timeName) != -1 ? true : false }'
							v-model="scope.row.list[5].teaId" placeholder="任课老师">
							<el-option v-for="item in scope.row.list[5].teacherlist" :key="item.teaId" :label="item.teaName"
								:value="item.teaId">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="周日">
					<template slot-scope="scope">
						<el-select v-model="scope.row.list[6].subId" placeholder="科目"
							@change="getcourseid(scope.row.list[6])">
							<el-option v-for="item in courseslist" :key="item.subId" :label="item.subName"
								:value="item.subId">
							</el-option>
						</el-select>
						<el-select
							:class='{ active: scope.row.list[6].myErrorData.findIndex(v => v == "周日" + scope.row.list[6].timeName) != -1 ? true : false }'
							v-model="scope.row.list[6].teaId" placeholder="任课老师">
							<el-option v-for="item in scope.row.list[6].teacherlist" :key="item.teaId" :label="item.teaName"
								:value="item.teaId">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			tableData: [{
				level: "第一节",
				list: [{
					subId: "",
					teaId: "",
					dayName: "周1",
					timeName: "第1节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周2",
					timeName: "第1节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周3",
					timeName: "第1节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周4",
					timeName: "第1节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周5",
					timeName: "第1节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: null,
					teaId: null,
					dayName: "周6",
					timeName: "第1节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: null,
					teaId: null,
					dayName: "周日",
					timeName: "第1节课",
					myErrorData: [],
					teacherlist: [],
				},


				]
			},
			{
				level: "第二节",
				list: [{
					subId: "",
					teaId: "",
					dayName: "周1",
					timeName: "第2节课",
					myErrorData: [],
					teacherlist: [],

				},
				{
					subId: "",
					teaId: "",
					dayName: "周2",
					timeName: "第2节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周3",
					timeName: "第2节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周4",
					timeName: "第2节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周5",
					timeName: "第2节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: null,
					teaId: null,
					dayName: "周6",
					timeName: "第2节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: null,
					teaId: null,
					dayName: "周日",
					timeName: "第2节课",
					myErrorData: [],
					teacherlist: [],
				},
				]
			},
			{
				level: "第三节",
				list: [{
					subId: "",
					teaId: "",
					dayName: "周1",
					timeName: "第3节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周2",
					timeName: "第3节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周3",
					timeName: "第3节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周4",
					timeName: "第3节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周5",
					timeName: "第3节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: null,
					teaId: null,
					dayName: "周6",
					timeName: "第3节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: null,
					teaId: null,
					dayName: "周日",
					timeName: "第3节课",
					myErrorData: [],
					teacherlist: [],
				},

				]
			},
			{
				level: "第四节",
				list: [{
					subId: "",
					teaId: "",
					dayName: "周1",
					timeName: "第4节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周2",
					timeName: "第4节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周3",
					timeName: "第4节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周4",
					timeName: "第4节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周5",
					timeName: "第4节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: null,
					teaId: null,
					dayName: "周6",
					timeName: "第4节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: null,
					teaId: null,
					dayName: "周日",
					timeName: "第4节课",
					myErrorData: [],
					teacherlist: [],
				},

				]
			},
			{
				level: "第五节",
				list: [{
					subId: "",
					teaId: "",
					dayName: "周1",
					timeName: "第5节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周2",
					timeName: "第5节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周3",
					timeName: "第5节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周4",
					timeName: "第5节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: "",
					teaId: "",
					dayName: "周5",
					timeName: "第5节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: null,
					teaId: null,
					dayName: "周6",
					timeName: "第5节课",
					myErrorData: [],
					teacherlist: [],
				},
				{
					subId: null,
					teaId: null,
					dayName: "周日",
					timeName: "第5节课",
					myErrorData: [],
					teacherlist: [],
				},
				]
			},
			],
			baseUrl: require("../js/baseUrl.js").baseUrl,
			classlist: [],
			choose: "",
			classname: "",
			submitFlag: true,
			checkFlag: true,
			//teacherlist: [],
			courseslist: [],
			pageIndex: 1,
			pageSize: 20,
			schas: [],
			myErrorData: []
		}
	},
	methods: {
		//检查
		check() {
			//前端验证
			if (this.schas == []) {
				this.$message.success("请完善课表")
			}
			let classId = this.choose; //班级id;
			//console.log(this.tableData)
			let schas = []
			this.tableData.forEach(v => {
				//console.log(v.list)
				v.list.forEach(item => {
					item.clazzId = classId
					schas.push(item)
				})
			})
			//console.log("schas666", schas)
			this.schas = schas
			console.log("schas", this.schas)
			//调用检查接口
			//SchoolSys/scha/check
			this.$http.post(this.baseUrl + "SchoolSys/scha/check", {
				schas: this.schas
			}).then(res => {
				if (res.data.code == 200) {
					this.checkFlag = true
					this.submitFlag = false
					//console.log(this.myErrorData);
					this.myErrorData = []
					this.tableData.forEach(v => {
						v.list.forEach(item => {
							item.myErrorData = this.myErrorData
						})
					})
					//console.log(this.myErrorData);
					this.$message.success("检查完成，请提交")
				} else if (res.data.code == 500) {
					this.$message.error("教师存在上课冲突，请调整")
					this.myErrorData = []
					let errorData = res.data.data
					errorData.forEach(v => {
						this.myErrorData.push(v.dayName + v.timeName)
					})
					//console.log("检查返回", this.myErrorData);
					//console.log('table',this.tableData)
					this.tableData.forEach(v => {
						v.list.forEach(item => {
							item.myErrorData = this.myErrorData
						})
					})

				}
			})
		},
		submit() {
			this.$http.post(this.baseUrl + "SchoolSys/scha/add", {
				schas: this.schas,
			}).then(res => {
				// console.log(res);
				if (res.data.code == 200) {
					this.$message({
						message: '提交成功',
						type: 'success'
					});
					setTimeout(() => {
						this.$router.push('/coursemanager/coursemanagement/courseclass?classid=' + this.choose + '&classname=' + this.classname)
					}, 500);
				}
			})
		},
		back() {
			this.$router.push('/coursemanager/coursemanagement/courseclass')
		},
		//获取所有班级
		getclass() {
			this.$http.post(this.baseUrl + "SchoolSys/stu/clazzlist", {}).then(res => {
				//console.log(res);
				if(res.data.code==200){
					this.classlist = res.data.data
				}else{
					this.$message.error(res.data.msg)
				}
				// console.log(this.classlist);
			})
		},
		//获取选中班级id
		getclassid(classid) {
			//console.log(classid);
			this.choose = classid;
			this.classlist.forEach(v => {
				//console.log(v)
				if (v.clazzId == this.choose) {
					this.classname = v.clazzName
				}
			});
			//SchoolSys/scha/addcheck
			this.$http.post(this.baseUrl + "SchoolSys/scha/addcheck", {
				clazzId: this.choose
			}).then(res => {
				console.log("班级课表", res);
				if (res.data.code == 200) {
					this.checkFlag = false;
					this.getclasssection();
				} else {
					this.$message.error(res.data.msg+"，只能修改")
					this.$router.push('/coursemanager/coursemanagement/changeclasstable?classid=' + this.choose + '&classname=' + this.classname)
				}
			})
		},
		//根据班级id查对应课目，对应老师
		getclasssection() {
			this.$http.post(this.baseUrl + "SchoolSys/clazz/selectclazzsub", {
				clazzId: this.choose
			}).then(res => {
				console.log("班级对应科目",res);
				if (res.data.code == 200) {
					this.courseslist = res.data.data.filter(v => v.status == 1)
					//console.log(this.courseslist);
					if(this.courseslist.length==0){
						this.$message.error("该班级暂无课程，请添加")
					}
				}
			})
		},
		//根据课程id查询老师：
		getcourseid(Courses) {
			//console.log("Courses",Courses.id)
			this.checkFlag=false,
			this.submitFlag=true
			this.$http.post(this.baseUrl + "SchoolSys/getTeachersBySubId", {
				subId: Courses.subId
			}).then(res => {
				//console.log("666",res);
				if (res.data.code == 200) {
					Courses.teacherlist = res.data.data.teachers
				}
			})
		},
	},
	mounted() {
		this.getclass();
	}
}
</script>

<style lang="less">
.changeclasstable {
	padding: 40px 40px 0px 40px;

	.el-table thead {
		color: #333;

	}

	.navget {
		position: absolute;
		top: 0;
		left: 0;
	}

	.addclasstable {
		position: absolute;
		top: 0;
		right: 10%;
		font-size: 15px;
		border-radius: 4px;
	}

	.lookclasstable {
		position: absolute;
		top: 0;
		right: 17%;
		font-size: 15px;
		border-radius: 4px;
	}

	.courseinput {
		position: absolute;
		width: 15% !important;
		left: 150px;
		top: 0;
	}

	.coursesearchbtn {
		position: absolute;
		left: 380px;
		top: 0;
	}

	.back {
		position: absolute;
		top: 0;
		right: 5%
	}

	.tip {
		position: absolute;
		top: 30px;
		right: 17%;
		font-size: 10px;
		color: #ccc;
	}

	.tableFrom {
		padding: 20px;
		background: white;
		text-align: center;
		margin-top: 20px;

		.el-input__inner {
			height: 25px;
			line-height: 25px;
		}

		.el-input__inner:nth-of-type(1) {
			margin-top: 8px
		}

		.el-input__icon {
			line-height: 25px
		}

		.el-table td.el-table__cell div {

			text-align: center;
		}

		.el-table th.el-table__cell>.cell {
			text-align: center;
		}



		.el-table td.el-table__cell,
		.el-table th.el-table__cell.is-leaf {
			border-bottom: 1px solid #333;
		}

		.el-table--border,
		.el-table--group {
			border: 1px solid #333;
		}

		.el-table--border .el-table__cell,
		.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
			border-right: 1px solid #333;
		}

	}
}

.el-select.active input {
	border: 1px solid red;
}</style>